import React from 'react';
import {Form, Input, Button, Modal, Message, DatePicker, Icon, Table } from 'antd';
const FormItem = Form.Item;

let RoomList = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    let currentPage = this.props.location.state ? this.props.location.state.currentPage : 1;
    console.log(currentPage)
    return {
      formsData: {},
      data: [],
      pagination: {
        pageSize: 10,
        current: currentPage,
        
      },
      startTime: null
    }
  },

  componentDidMount() {
    this.handleSearch();
  },

  handleTableChange(pagination) {
    console.log(pagination)
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch();
  },


  fetch() {
    let forms = this.props.form.getFieldsValue();
    let page = this.state.pagination.current;
    forms.startTime = Utils.formatDate( forms.startTime);
    forms.endTime = Utils.formatDate( forms.endTime);
    let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms);
    let _me = this
    Utils.sendAjax({
      url: '/room/reserve/list',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },
  rowKey(data) {
    return data.id;
  },

  handleSearch() {
    this.setState({
      pagination: {
        current: this.state.pagination.current
      }
    })
    this.fetch();
  },

  handleReset() {
    this.props.form.resetFields();
  },

  handleBook(record) {
    let goPathUrl= '/landlord/rentManage/advanceOrder/cancle';
    this.context.router.push({pathname: goPathUrl, state: {...record}});
  },
  handleModify(record) {
    let params = record;
     console.log(this.state.pagination.currentPage)
    params.currentPage = this.state.pagination.currentPage;
    let goPathUrl= '/landlord/rentManage/advanceOrder/modify';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },
  handleDetails(record) {
    let params = record;
    console.log(record)
    params.actionType = 'check';
    params.currentPage = this.state.pagination.currentPage;
    let goPathUrl= '/landlord/rentManage/advanceOrder/details';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },


  handleSignUp(record) {
    let goPathUrl= '/landlord/rentManage/signUpOrder/add';
    this.context.router.push({pathname: goPathUrl, state: {...record}});
  },

  handleTime(val) {
    this.setState({
      startTime: val
    })
  },

  render() {
    console.log(this.state.pagination)
    const { getFieldProps } = this.props.form;
    // console.log(this.props.form)
    let _me = this;
    const columns = [

      {
        title: '租客姓名',
        dataIndex: 'renterName'
      },
      {
        title: '联系方式',
        dataIndex: 'phone'
      },
      {
        title: '预计入住日期',
        dataIndex: 'checkinTime'
      },
      {
        title: '房源地址',
        dataIndex: 'address'
      },
      {
        title: '预订日期',
        dataIndex: 'reserveTime'
      },
      {
        title: '租金',
        dataIndex: 'rent'
      },
      {
        title: '定金',
        dataIndex: 'reserveAmount'
      },
      {
        title: '是否看房',
        render: (text, record) => {
          return (
            <span>{record.isLook == 1 ? '是' : '否'}</span>
          )
        }
      },
      {
        title: '租房情况',
        render: (text, record) => {
          return (
            <span>{record.status == 1 ? '已签约' : record.status == 2 ? '已预订' : '已取消'}</span>
          )
        }
      },
      {
        title: '操作',
        render: (text, record) => {
          return (

            <div>
              {record.status == 2 ?  <div>
                <a href="javascript:;" onClick={this.handleModify.bind(this, record)}>修改</a>&nbsp;|&nbsp;
                <a href="javascript:;" onClick={this.handleBook.bind(this, record)}>取消预订</a>&nbsp;|&nbsp;
                <a href="javascript:;"  onClick={this.handleSignUp.bind(this, record)}>发起签约</a>
              </div>: ''}
              <a href="javascript:;"  onClick={this.handleDetails.bind(this, record)}>查看</a>
            </div>
          )
        }
      },
    ];
    const disabledDate = function (current) {
      let key = _me.state.startTime.getTime();
      return current && current.getTime() < key;
    };

    return (
      <div>
        <div className="search-bar">
          <Form inline>
            <FormItem  label="租客姓名">
              <Input {...getFieldProps('renterName') } placeholder="租客姓名"/>
            </FormItem>
           <FormItem  label="联系方式">
              <Input {...getFieldProps('phone') } placeholder="联系方式"/>
            </FormItem>
            <FormItem label="预订时间">
              <DatePicker  {...getFieldProps('startTime',{onChange: this.handleTime})} placeholder="预订起始日期" style={{width: 162}}/>&nbsp;至&nbsp;
              <DatePicker  {...getFieldProps('endTime')} placeholder="预订结束日期" style={{width: 162}}/>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
              <Button type="default" onClick={this.handleReset} >重置</Button>
            </FormItem>
          </Form>
        </div>
        <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
               onChange={this.handleTableChange}  pagination={this.state.pagination}/>
      </div>
    );
  }
});
RoomList = Form.create()(RoomList);
export default RoomList